<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        v-for指令：
            1.用于展示列表数据
            2.语法：v-for="(item,index) in xxx" :key="yyy"
            3.可遍历：数组、对象、字符串、指定次数
    -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <!-- v-for用于循环；:key用于指定每个列表的唯一id -->
            <li v-for="per in personArr" :key="per.id">
                {{per.name}} - {{per.age}}
            </li>
        </ul>
        <h2>员工列表</h2>
        <ul>
            <!-- 第二种写法 -->
            <li v-for="(per,index) in personArr" :key="index">
                {{per.name}} - {{per.age}}
            </li>
        </ul>
        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(val,k) in car" :key="k">
                {{k}} - {{val}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data:{
                personArr:[
                    {id:'001',name:'tom',age:20},
                    {id:'002',name:'jack',age:21},
                    {id:'003',name:'bob',age:22}
                ],
                car:{
                    name:"小米SU7",
                    price:"20万"
                }
            },

        })
    </script>
</body>
</html>